<template>
  <div>
    <h1>3、新增图书信息</h1>
    <input v-model="obj.bookname" type="text" placeholder="书名">
    <input v-model="obj.author" type="text" placeholder="作者">
    <input v-model="obj.publisher" type="text" placeholder="出版社">
    <button @click="addFn">点击新增图书</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
  // 点击按钮，收集用户输入的信息，调用接口实现新增
  // /api/addbook
  data(){
    return {
      // bookname: ""
      // 有多个参数的时候，我们通常会先声明一个对象出来，然后
      // 把所有参数给这个对象，这个为了方便调用接口的时候传值。
      obj: {
        appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
        bookname: "",
        author: "",
        publisher: ""
      }
    }
  },
  methods: {
    // 总结：post请求要用data传参
    addFn(){
      axios({
        method: "post",
        url: "http://123.57.109.30:3006/api/addbook",
        data: {
          // appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
          // bookname: this.obj.bookname,
          // author: this.obj.author,
          // publisher: this.obj.publisher
          // 把所有属性写在对象中的好处，传参的时候比较方便
          ...this.obj
        }
      }).then(res=>{
        console.log(res);
      })
    }
  }
}
</script>

<style>

</style>